<template>
	<view class="">
		<view class="" style="margin:40rpx auto;width: 500rpx;" v-if="ismy">
			<u-image src="/static/gongxi.png" width="500" height="182" mode="widthFix" > </u-image>
		</view>
		<view class="" style="margin:40rpx auto;width: 500rpx;" v-if="!ismy">
			<u-image src="/static/Group_108.png" width="500" height="182" mode="widthFix"></u-image>
		</view>



		<view class="pingtai" :style="{backgroundImage:'url('+imagesurl+'/images/pingtai.png)'}">
			<view class="img">
				<u-image :src="info.goods[0].cover" width="300" height="300"></u-image>
			</view>

			<view class="name">{{info.goods[0].name}}</view>
		</view>

		<button class="btn" v-if="!ismy" @click="help">砍一刀</button>
		
		<button class="btn" v-if="!ismy" @click="back">我也要免费拿</button>

		<view class="mode" v-if="ismy">
			<view class="time">{{info.expirationTime}}后过期</view>
			<view style="width: 600rpx;margin:auto;text-align: center;font-size: 32rpx;">
				<view class="u-margin-top-40">已砍价<text style="color: ##FF6450;">{{info.price}}</text>免费拿仅差</view>
				<view style="color: #FF6450;font-size: 40rpx;">{{info.progress}}%</view>
			</view>
			<button class="btn" open-type="share">分享好友</button>

		</view>

		<view class="mode1" v-if="ismy">
			<view v-for="(item,index) in list" :key="index" class="u-flex u-row-between">
				<view class="u-flex">
					<u-image :src="item.headimg" width="80" height="80" shape="circle"></u-image>
					<view class="u-margin-left-20">{{item.nickname}}</view>
				</view>
				<view class="" style="color: #FF6450;">
					砍掉{{item.price}}
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>


		<u-toast ref="uToast" />



	</view>
</template>

<script>
	import url from '@/common/baseUrl.js';

	export default {
		data() {
			return {
				imagesurl: url.imageUrl,
				id: "",
				info: {

				},
				list: [],
				page: 1,
				status: 'loadmore',
				ismy: false,
				isTitle:true


			}
		},
		onLoad(options) {
			console.log(options)
			if (options.id) {
				this.id = options.id
			}
			this.get()
			this.record()
			
		},
		onReachBottom() {
			if (this.status == 'nomore') {

			} else {
				this.record()
			}

		},
		
		// onShareAppMessage(){
		// 	  return {
		// 	       imageUrl:'/static/share.png',
		// 	       title:'我在惠首淘免费拿好物，借你的大刀砍一砍~'
		// 	    }
		// },
	

		methods: {
			get() {
				this.$u.post('/api/Indent/bargainDetail', {
					order_id: this.id
				}, {}).then(res => {
					this.info = res.data;
					this.info.progress=Number(res.data.progress).toFixed(2);
					var mid = this.$store.state.userInfo.mid
					this.ismy = res.data.memberId == mid
				}).catch(err => {})
			},
			help() {
				this.$u.post('/api/Indent/cutPrice', {
					order_id: this.id
				}, {}).then(res => {
					var price=res.data.price;
					this.$refs.uToast.show({
						title: '帮砍'+ price + "元",
						type: 'success',
					})

				}).catch(err => {})

			},
			back(){
				uni.navigateTo({
					url:"/pages/kanjia/index"
				})
			},
			record() {
				this.$u.post('/api/Indent/bargainLog', {
					order_id: this.id
				}, {}).then(res => {
					var resList = res.data;
					if (this.page == 1) {
						this.list = []
					}
					if (resList.length > 9) {
						this.status = 'loadmore'
						this.page = this.page + 1
					} else {
						this.status = 'nomore'
					}
					this.list = this.list.concat(resList)
					this.loading = false
				}).catch(err => {})

			}
		}
	}
</script>

<style lang="scss">
	page {

		width: 100%;
		min-height: 100%;

		background: #FB5E3F;
		display: inline-block;
	}

	.pingtai {
		width: 560rpx;
		height: 690rpx;
		background-size: cover;
		margin: auto;
		position: relative;

		.name {
			position: absolute;
			width: 560rpx;
			bottom: 0;
			text-align: center;
			left: 0;
			height: 60rpx;
			line-height: 60rpx;
			color: #A66D00;

		}

		.img {
			position: absolute;
			bottom: 150rpx;
			left: 130rpx;
		}
	}

	.mode1 {
		width: 690rpx;
		margin: 40rpx auto;
		border-radius: 40rpx;
		background: #FFFFFF;
		position: relative;
		padding: 40rpx;
	}

	.mode {
		width: 690rpx;
		margin: 40rpx auto;
		border-radius: 40rpx;
		background: #FFFFFF;
		position: relative;
		padding: 40rpx;

		.time {
			background: #FF6450;
			border-radius: 40rpx 0px;
			text-align: center;
			color: #FFFFFF;
			font-size: 28rpx;
			position: absolute;
			top: 0;
			left: 0;
			padding: 14rpx 30rpx;
		}
	}

	.btn {
		width: 367rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin: 40rpx auto;
		color: #FFFFFF;
		background: linear-gradient(89.39deg, #FF6450 5.28%, #FFB525 99.47%);
		border-radius: 50rpx;
		font-size: 28rpx;
	}
</style>
